<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{padding: 10px;}
        p{display: inline-block;width: 90px;text-align: right}
        input{margin-left: 10px;width: 235px}
        form{margin: 80px auto;width: 700px;background: darkgray;}
        .high{color: red;padding: 5px;}
        span{padding: 5px;color: red;}
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <form id="userForm">
        <div>
            <p>用户名:</p>
            <input type="text" id="username" name="name" placeholder="请输入用户名"><span></span>
        </div>
        <div>
            <p>密码:</p>
            <input type="text" id="password" name="password" placeholder="请输入密码"><span></span>
        </div>
        <div>
            <p>确认密码:</p>
            <input type="text" id="rePassword" placeholder="请输入再次输入密码"><span></span>
        </div>
        <div>
            <p>邮箱:</p>
            <input type="text" id="email" name="email" placeholder="请输入邮箱"><span></span>
        </div>
        <div align="center" style="padding: 30px;">
            <button id="sent" style="padding: 10px;" >立即注册</button>
        </div>
    </form>

    <script>
        //为表单的必填文本框添加提示信息（选择form中的所有后代input元素）
        $("form span").each(function () {
            //通过jquery api：$("HTML字符串") 创建jquery对象
            var $required = $("<strong class='high'>*</strong>");
            //添加到this对象的父级对象下
            $(this).append($required);
        });

        $("form :input").blur(function(){
            //1.验证用户名
            if($(this).is("#username")){
                var username = $("#username").val();
                var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                if(username.length < 4 || regName.test(username)){
                    var error = "用户名不能少于4个字符且不能用特殊字符";
                    //如果输入错误，那么给input框的兄弟节点，也就是span标签加上class=error,并且给span追加内容
                    $(this).siblings("span").html("");//如果没有该句，那么提示信息会一直累加,为什么不用val(),text()
                    $(this).siblings("span").attr("class","error").append(error);
                }else {
                    var success = "正确";
                    $(this).siblings("span").html("");
                    $(this).siblings("span").attr("class","success").append(success);
                }
            }

            if($(this).is("#email")){
                var username = $("#email").val();
            }

        });

        //5.提交表单
        $("#sent").click(function () {
            //1.点击提交，也需要验证表单值
            //检查表单中的span标签是否存在class=error即可，如果存在那么说明有错的验证
            $("form :input").trigger("blur");//提交表单，首先触发表单全部焦点事件，焦点事件会去验证每一个blur环境下的input，可以知道input是不是有值
            var arrorLength = $(".error").length;
            if (arrorLength){
                alert("表单信息有问题,不能提交");
                return false;
            }
            //如果程序走到这里说明，上面的程序都通过了，那么这里就可以用ajax提交表单
            //获取表单的值
            var userBase ={};
            //取出表单的input属性和对应的值
            var $form = $("#userForm input");
            for (var i = 0; i < $form.length; i++) {
                if ($form[i].value!='') {
                    userBase[$form[i].name] = $form[i].value;//json对象：往user对象填充属性和属性值 格式：user = {username""哈哈青年",email:"123456@qq.com"}
                    console.log(userBase[$form[i].name] = $form[i].value);
                }

            }
            console.log(JSON.stringify(userBase));
            $.ajax({
                url:'http://localhost:8080/user/addName',
                type:'post',
                data:{
                    "name":userBase.name,
                    "password":userBase.password,
                    "email":userBase.email
                },
                // data:JSON.stringify(userBase),//转化成json字符串格式，引号的区别，往user对象填充属性和属性值 格式：user = {"username":"哈哈青年","email":"123456@qq.com"}
                success:function (data) {
                    if(data == 200){
                        //1.注册成功，那么需要跳转到登录的界面
                        setTimeout(function () {
                            if (confirm("三秒后跳转到登陆界面!")){
                                window.location.href = "login.html"
                            }
                            window.location.href = "login.html"
                        },3000);
                        alert("成功")

                    }
                    //2.提示失败的原因
                }
            });
            return false;
        })
    </script>

</body>
</html>